<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="875px"
    custom-class="openCourseDialog"
    @close="handelClsoe"
    :close-on-click-modal="false"
  >
    <template slot="title">
      <img
        :src="require('@/assets/images/closeIcon.png')"
        @click="handelClsoe"
      />
    </template>
    <div class="content" v-if="dialogVisible">
      <div class="title">{{ courseData.name }}</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="form"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-form-item label="开课名称：" prop="name">
          <el-input
            class="inline-input"
            v-model="ruleForm.name"
            placeholder="请输入开课名称"
            popper-class="autocompletePopper-teacherName"
          >
            <template slot="append">
              <img :src="require('@/assets/images/user.png')" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="开课说明：" prop="currDesc">
          <el-input
            type="textarea"
            class="inline-input"
            v-model="ruleForm.currDesc"
            placeholder="请输入开课说明"
            popper-class="autocompletePopper-teacherName"
          >
            <template slot="append">
              <img :src="require('@/assets/images/user.png')" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="任课老师：">
          <el-select
            v-model="ruleForm.tutorStaffUserID"
            size="small"
            placeholder="请选择任课老师"
            key="sTeacher"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.userID"
              :label="item | filterUserName"
              :value="item.userID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="其他任课老师：">
          <el-select
            v-model="ruleForm.otherTutorUserIDList"
            multiple
            size="small"
            placeholder="选择其他任课老师"
            key="sTeacher"
          >
            <el-option
              v-for="item in filterMainTutorStaffUser"
              :key="item.userID"
              :label="item | filterUserName"
              :value="item.userID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选课日期：" prop="chooseTimeArr">
          <el-date-picker
            v-model="ruleForm.chooseTimeArr"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['08:00:00', '12:00:00']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上课日期：" prop="TeachingTimeArr">
          <el-date-picker
            v-model="ruleForm.TeachingTimeArr"
            type="datetimerange"
            start-placeholder="开课日期"
            end-placeholder="结课日期"
            :default-time="['08:00:00', '18:00:00']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上课班级：">
          <el-select
            v-model="ruleForm.classIDList"
            multiple
            filterable
            default-first-option
            placeholder="选择上课的班级"
            key="sClass"
            @change="handlerSelectClass"
          >
            <el-option
              v-for="item in filterClassList"
              :key="item.classID"
              :label="item.className"
              :value="item.classID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生助教：">
          <el-select
            v-model="ruleForm.assistantStuIDs"
            multiple
            filterable
            size="small"
            placeholder="选择学生助教"
            key="sStu"
          >
            <el-option
              v-for="item in stuList"
              :key="item.userID"
              :label="item | filterUserName"
              :value="item.userID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动选课">
          <el-switch v-model="ruleForm.autoSelect" />
        </el-form-item>
        <el-form-item label="指定指导教师：">
          <el-switch v-model="ruleForm.shouldChooseTutor" />
        </el-form-item>
        <el-form-item label="限制班级选课：">
          <el-switch v-model="ruleForm.onlyInClassCanSelect" />
        </el-form-item>
        <el-form-item label="选择非常规班：">
          <el-switch v-model="ruleForm.notForNormalClass" />
        </el-form-item>
        <div class="distributionTeacher" v-if="newNACTeacher.length">
          <span>为老师分配班级</span>
          <div
            v-for="(item, index) in newNACTeacher"
            :key="index"
            class="selectRow"
          >
            <span class="tName" :title="item | filterUserName"
              >{{ item | filterUserName }} :</span
            >
            <el-select
              v-model="item.selectClass"
              multiple
              size="small"
              placeholder="请选择"
              key="teacherSelectClass"
              no-data-text="请先选择上课班级"
            >
              <el-option
                v-for="item in formatClassIDtoObjArr"
                :key="item.classID"
                :label="item.className"
                :value="item.classID"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="watchFormData"
            :class="{ disabledBtn: watchFormData }"
            @click="verificationValue"
            >{{ isOpen ? "确认开课" : "提交修改" }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import {
  gencurr,
  updatecurr,
  getCurriculumCourseInfo,
} from "@/request/courses";
// import { getRegisteredUser } from "@/request/user";
import { getTeacherList, getStuByClassIds } from '@/request/teacher'
import { getClassList } from "@/request/user";
import { toMs } from "@/util/tool";
import { mapState } from "vuex";
import { Session } from "@/util/storage/session"
export default {
  data() {
    return {
      // 弹窗状态
      dialogVisible: false,
      // 表单数据
      ruleForm: {
        name: "",
        currDesc: "",
        chooseTimeArr: "",
        chooseTime: "",
        lastChooseTime: "",
        TeachingTimeArr: "",
        startTeachingTime: "",
        finishTeachingTime: "",
        tutorStaffUserID: "",
        classIDList: [],
        otherTutorUserIDList: [], // 其他任课老师列表
        assistantStuIDs: [], // 学生助教
        onlyInClassCanSelect: false,
        notForNormalClass: false,
        tutorMapJson: "",
        shouldChooseTutor: false, // 是否需要指定教师
        autoSelect: false, // 是否自动选课
        taskSettings: {},
      },
      // 需要任课的老师
      needAttendClassTeachers: [],
      // 多个任课老师的用户信息
      newNACTeacher: [],
      // 教师列表
      teacherList: [],
      stuList: [],
      // 表单校验
      rules: {
        // name: [
        //   { required: true, message: "请输入任课老师姓名", trigger: "blur" },
        //   {
        //     required: true,
        //     message: "请输入任课老师姓名",
        //     trigger: "change",
        //   },
        // ],
        chooseTimeArr: [
          {
            required: true,
            message: "请选择选课日期",
            trigger: "blur",
          },
        ],
        TeachingTimeArr: [
          {
            required: true,
            message: "请选择上课日期",
            trigger: "blur",
          },
        ],
        chooseTime: [
          {
            type: "date",
            required: true,
            message: "请选择开始选课日期",
            trigger: "blur",
          },
        ],
        lastChooseTime: [
          {
            type: "date",
            required: true,
            message: "请选择截止选课日期",
            trigger: "blur",
          },
        ],
        startTeachingTime: [
          {
            type: "date",
            required: true,
            message: "请选择预期开课时间",
            trigger: "blur",
          },
        ],
        finishTeachingTime: [
          {
            type: "date",
            required: true,
            message: "请选择预期结课时间",
            trigger: "blur",
          },
        ],
      },
      options: [
        // { value: "1", label: "19软件技术1班", teachers: [] },
        // { value: "2", label: "19软件技术2班", teachers: [] },
        // { value: "3", label: "20软件技术1班", teachers: [] },
        // { value: "4", label: "20软件技术2班", teachers: [] },
        // { value: "5", label: "21软件技术1班", teachers: [] },
        // { value: "6", label: "21软件技术2班", teachers: [] },
        // { value: "7", label: "21软件技术3班", teachers: [] },
      ],
      value: [],
      // list: [],
      loading: false,
      // states: [
      //   { value: "1", label: "19软件技术1班" },
      //   { value: "2", label: "19软件技术2班" },
      //   { value: "3", label: "20软件技术1班" },
      //   { value: "4", label: "20软件技术2班" },
      //   { value: "5", label: "21软件技术1班" },
      //   { value: "6", label: "21软件技术2班" },
      //   { value: "7", label: "21软件技术3班" },
      // ],
    };
  },
  props: {
    courseData: Object,
    isShow: Boolean,
    isOpen: Boolean,
  },
  watch: {
    isShow(newValue) {
      this.handleShow()
    },
    // 选择主负责任课老师时判断当前老师是否存在于其他任课老师中
    "ruleForm.tutorStaffUserID"(n, o) {
      this.ruleForm.otherTutorUserIDList =
        this.ruleForm.otherTutorUserIDList.filter((item) => item !== n);
      const findUser = this.newNACTeacher.find((nitem) => nitem.userID == n);
      const teacherSelectClass = {}
      if(this.ruleForm.tutorIDToClassIDMap) {
        this.ruleForm.tutorIDToClassIDMap.split(";").forEach(item => {
          const key = item.split(":")[0]
          const value = item.split(":")[1]
          if (key && value) teacherSelectClass[key] = value.split(",").map(item => Number(item))
        })
      }
      if (!findUser) {
        const pushTeacher = this.teacherList.find((fitem) => fitem.userID == n);
        if (pushTeacher) {
          this.newNACTeacher.push(Object.assign(pushTeacher, { selectClass: teacherSelectClass?.[pushTeacher.userID] ? [...teacherSelectClass[pushTeacher.userID]]: [] }));
        }
      }
      if (n !== o && o) {
        this.newNACTeacher = this.newNACTeacher.filter(
          (item) =>
            n == item.userID ||
            this.ruleForm.otherTutorUserIDList.includes(item.userID)
        )
      }
    },
    "ruleForm.otherTutorUserIDList"(n, o) {
      if ((!n.length && !o.length) || n.length == o.length) return;
      if (
        o.includes(this.ruleForm.tutorStaffUserID) &&
        !n.includes(this.ruleForm.tutorStaffUserID)
      )
        return;
      if (n.length > o.length) {
        console.log(1);
        const teacherSelectClass = {}
        if(this.ruleForm.tutorIDToClassIDMap) {
          this.ruleForm.tutorIDToClassIDMap.split(";").forEach(item => {
            const key = item.split(":")[0]
            const value = item.split(":")[1]
            if (key && value) teacherSelectClass[key] = value.split(",").map(item => Number(item))
          })
        }
        n.forEach((item) => {
          const findUser = this.newNACTeacher.find(
            (nitem) => nitem.userID == item
          );
          if (!findUser) {
            const pushTeacher = this.teacherList.find(
              (fitem) => fitem.userID == item
            );
            if (pushTeacher) {
              this.newNACTeacher.push(Object.assign(pushTeacher, { selectClass:  teacherSelectClass?.[pushTeacher.userID] ?  [...teacherSelectClass[pushTeacher.userID]] : [] }))
            }
          }
        });
      } else {
        this.newNACTeacher = this.newNACTeacher.filter((item) =>
          n.includes(item.userID) || item.userID == this.ruleForm.tutorStaffUserID
        );
      }
    },
    "ruleForm.classIDList"(n) {
      this.newNACTeacher.forEach(item => {
        item.selectClass = item.selectClass.filter(sClassID => n.some(id => id == sClassID))
      })
    },
    "ruleForm.notForNormalClass"(n) {
      this.ruleForm.classIDList = this.ruleForm.classIDList.filter(sClassID => this.mapClassListId.some(id => id == sClassID))
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    watchFormData() {
      let flag = true;
      if (
        this.ruleForm.name !== "" &&
        this.ruleForm.chooseTimeArr &&
        this.ruleForm.TeachingTimeArr
      ) {
        flag = false;
      }
      return flag;
    },
    formatClassIDtoObjArr() {
      return this.options.filter((item) => {
        return this.ruleForm.classIDList.includes(item.classID);
      });
    },
    // 过滤已选任课老师的信息
    filterMainTutorStaffUser() {
      return this.teacherList.filter(
        (item) => item.userID !== this.ruleForm.tutorStaffUserID
      );
    },
    filterClassList() {
      if (this.ruleForm.notForNormalClass) return this.options.filter(item => item.classType == '非常规班' || !item.classType)
      else return this.options.filter(item => item.classType == '常规班')
    },
    mapClassListId() {
      return this.filterClassList.map(item => item.classID)
    },
    getTeacherRole() {
      return this.userInfo?.authNum ? this.userInfo.authNum.indexOf(2) !== -1 : false
    }
  },
  filters: {
    filterUserName(item) {
      return item.realName || item.nickName || item.email || item.regName;
    },
  },
  created() {
    // this.ruleForm.tutorStaffUserID = this.userInfo.userID;
    // 获取教师列表
    if (this.getTeacherRole) this.getUserList();
    if (this.getTeacherRole) this.gClassList();
    if (this.isShow) this.handleShow()
  },
  methods: {
    handleShow() {
      this.dialogVisible = this.isShow;
      if (!this.isOpen) this.getCurrCourseInfo();
      if (!this.ruleForm.name) this.ruleForm.name = this.courseData.name
      if (!this.ruleForm.currDesc) this.ruleForm.currDesc = this.courseData.name
      if (this.isOpen) this.ruleForm.tutorStaffUserID = this.userInfo.userID
    },
    // 提交前验证表单
    verificationValue() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.isOpen) {
            this.openCourse(this.courseData);
          } else this.updateCurr(this.courseData);
          this.handelClsoe();
          this.$refs.form.resetFields();
        } else {
          return false;
        }
      });
    },
    // 开课
    openCourse(item) {
      const {
        TeachingTimeArr,
        chooseTimeArr,
        currDesc,
        name,
        tutorStaffUserID,
        classIDList,
        assistantStuIDs,
        onlyInClassCanSelect,
        notForNormalClass,
        shouldChooseTutor,
        autoSelect
      } = this.ruleForm;
      const otherTutorUserIDList = this.ruleForm.otherTutorUserIDList.join(",");
      let tutorIDToClassIDMap = "";
      let filterTeacher = this.newNACTeacher
      filterTeacher.forEach((item) => {
        tutorIDToClassIDMap += `${item.userID}:`;
        tutorIDToClassIDMap += item.selectClass ? `${item.selectClass.join(",")};` : '';
      });
      let tutorMapJson = filterTeacher.map(item => {
        return { tutorID: item.userID, tutorName: item.realName, classIDs: item.selectClass}
      })
      gencurr({
        courseID: item.courseID,
        publishStaffUserID: this.userInfo.userID,
        startTeachingTime: toMs(TeachingTimeArr[0]),
        finishTeachingTime: toMs(TeachingTimeArr[1]),
        openChooseTime: toMs(chooseTimeArr[0]),
        closeChooseTime: toMs(chooseTimeArr[1]),
        classIDList: classIDList.join(","),
        assistantStuIDs: assistantStuIDs.join(","),
        currDesc,
        name,
        otherTutorUserIDList,
        tutorStaffUserID,
        tutorIDToClassIDMap,
        onlyInClassCanSelect,
        notForNormalClass,
        shouldChooseTutor,
        autoSelect,
        tutorMapJson
      }).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "开设成功",
          });
          Session.remove(`/api/curriculum/list`)
          Session.remove(`/api/choose/mylist?userID=${this.userInfo.userID}`)
        } else {
          this.$antdMessage.error({
            content: res.message || "开设课程失败！",
          });
        }
      });
    },
    updateCurr(item) {
      const {
        TeachingTimeArr,
        chooseTimeArr,
        currDesc,
        name,
        tutorStaffUserID,
        classIDList,
        assistantStuIDs,
        taskSettings,
        onlyInClassCanSelect,
        notForNormalClass,
        shouldChooseTutor,
        autoSelect
      } = this.ruleForm;
      const otherTutorUserIDList = this.ruleForm.otherTutorUserIDList.join(",");
      let tutorIDToClassIDMap = "";
      let filterTeacher = this.newNACTeacher
      filterTeacher.forEach((item) => {
        tutorIDToClassIDMap += `${item.userID}:`;
        tutorIDToClassIDMap += `${item.selectClass.join(",")};`;
      });
      let tutorMapJson = filterTeacher.map(item => {
        return {tutorID: item.userID,tutorName:item.realName, classIDs: item.selectClass}
      })
      updatecurr({
        courseID: item.courseID,
        currNo: item.currNo,
        publishStaffUserID: this.userInfo.userID,
        startTeachingTime: toMs(TeachingTimeArr[0]),
        finishTeachingTime: toMs(TeachingTimeArr[1]),
        openChooseTime: toMs(chooseTimeArr[0]),
        closeChooseTime: toMs(chooseTimeArr[1]),
        classIDList: classIDList.join(","),
        assistantStuIDs: assistantStuIDs.join(","),
        currDesc,
        name,
        taskSettings,
        tutorStaffUserID,
        otherTutorUserIDList,
        tutorIDToClassIDMap,
        onlyInClassCanSelect,
        notForNormalClass,
        shouldChooseTutor,
        autoSelect,
        tutorMapJson
      }).then((res) => {
        if (res.errno === 0) {
          Session.remove(`/api/curriculum/list`)
          Session.remove(`/api/choose/mylist?userID=${this.userInfo.userID}`)
          this.$antdMessage.success({
            content: "修改成功",
          });
          this.$parent.fetchCurriculumlist();
        } else {
          this.$antdMessage.error({
            content: res.message || "修改已开设课程信息失败！",
          });
        }
      });
    },
    getCurrCourseInfo() {
      getCurriculumCourseInfo({ id: this.courseData.currNo }).then(async (res) => {
        if (res.errno === 0) {
          this.ruleForm.name = res.data.name;
          this.ruleForm.currDesc = res.data.currDesc;
          this.ruleForm.tutorStaffUserID = res.data.tutorStaffUserID;
          this.ruleForm.chooseTimeArr = [
            new Date(res.data.openChooseTime),
            new Date(res.data.closeChooseTime),
          ];
          this.ruleForm.TeachingTimeArr = [
            new Date(res.data.startTeachingTime),
            new Date(res.data.finishTeachingTime),
          ];
          this.ruleForm.otherTutorUserIDList =  res.data.otherTutorUserIDList.length ? res.data.otherTutorUserIDList.split(",").map(item => Number(item)) : []
          this.ruleForm.onlyInClassCanSelect = res.data.onlyInClassCanSelect
          this.ruleForm.notForNormalClass = res.data.notForNormalClass
          this.ruleForm.shouldChooseTutor = res.data.shouldChooseTutor || false
          this.ruleForm.autoSelect = res.data.autoSelect || false
          this.ruleForm.tutorIDToClassIDMap = res.data.tutorIDToClassIDMap
          this.ruleForm.taskSettings = res.data.taskSettings || {}
          if (res.data.tutorMapJson) {
            this.ruleForm.tutorMapJson = res.data.tutorMapJson
            res.data.tutorMapJson.forEach(item => {
              this.ruleForm.tutorIDToClassIDMap += `${item.tutorID}:`;
              this.ruleForm.tutorIDToClassIDMap += `${item.classIDs.join(",")};`;
            })
          } else {
            this.ruleForm.tutorMapJson = res.data.tutorIDToClassIDMap.split(";").filter(item => item).map(item => { return  item && {tutorID: Number(item.split(":")[0]), classIDs: item.split(":")[1].split(",")}})
          }
          // newNACTeacher
          // selectClass
          const courseClassList = res.data.classIDList.length ?  res.data.classIDList.split(",").map(item =>  Number(item)) : []
          const assistantStuIDs = res.data.assistantStuIDs.length ? res.data.assistantStuIDs.split(",").map(item =>  Number(item)) : []
          this.ruleForm.classIDList = courseClassList;
          if (this.ruleForm.classIDList.length) this.getStuList()
          this.ruleForm.assistantStuIDs = assistantStuIDs
        } else {
          this.$antdMessage.error({
            content: res.message || "获取课程信息失败！",
          });
        }
      });
    },
    // 选择了班级后清空已选的学生
    handlerSelectClass() {
      this.ruleForm.assistantStuIDs = []
      this.getStuList()
    },
    // 获取学生列表
    async getStuList() {
      getStuByClassIds({classIDList: this.ruleForm.classIDList.join(',')})
        .then((res) =>{
          if (res) {
            this.stuList = res
          }
        })
    },
    // 关闭弹窗
    handelClsoe() {
      this.$parent.isShow = false;
    },
    // 获取用户列表
    async getUserList() {
      const roleFlag = 2;
      const data = await getTeacherList({ roleFlag: roleFlag });
      if (data)
        data.map((item) => (item.selectClass = [])),
          (this.teacherList = data);
      else
        this.$antdMessage.error({ content: "获取教师列表失败" });
    },
    async gClassList() {
      const data = await getClassList({classType: 'all'});
      if (data) this.options = data;
      else
        this.$antdMessage.error({ content: "获取班级列表失败" });
    },
  },
};
</script>

<style lang="stylus">
.el-dialog__wrapper {
  .openCourseDialog {
    width: 875px;
    min-height: 557px;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(159, 178, 196, 0.16);
    border-radius: 5px;
    border: solid 1px #9fa7b6;

    .el-dialog__header {
      padding: 25px;
      text-align: right;

      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
      }

      .el-dialog__headerbtn {
        display: none;
      }
    }

    .el-dialog__body {
      padding-top: 15px;

      .content {
        .title {
          padding-bottom: 16px;
          border-bottom: 1px dashed #d3dae4;
          text-align: center;
          font-family: PMingLiU-ExtB;
          font-weight: bold;
          font-size: 20px;
          color: #333333;
        }

        .el-form {
          padding-top: 28px;
          margin: 0 auto;
          width: 310px;

          .distributionTeacher {
            padding-left: 30px;

            .selectRow {
              display: flex;
              align-items: center;
              margin-bottom: 16px;

              .tName {
                display: inline-block;
                width: 80px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .el-select {
                width: 174px;
              }
            }
          }

          .el-form-item {
            margin-bottom: 16px;

            .el-form-item__label {
              padding-right: 10px;
              line-height: 32px;
            }

            .el-form-item__label::before {
              content: '';
              display: none;
            }

            .el-form-item__content {
              margin-left: 110px !important;
              width: 200px;
              line-height: 32px;

              .el-date-editor--datetimerange {
                width: 330px !important;
              }

              .el-input {
                position: relative;

                .el-input__inner {
                  padding: 0 30px 0 7px;
                  position: relative;
                  width: 200px;
                  height: 32px;
                  line-height: 32px;
                  border-radius: 5px;
                  border-color: #d3dae4;
                }

                .el-input__inner:focus {
                  border-color: #7aa5e3;
                }

                .el-input-group__append {
                  pointer-events: none;
                  position: absolute;
                  right: 1px;
                  top: 1px;
                  padding: 0 6.5px;
                  width: 29px;
                  height: 30px;
                  line-height: 30px;
                  background: #fff;
                  border: none;
                  border-radius: 5px;
                }
              }

              .el-input::after {
                position: absolute;
                pointer-events: none;
                content: '';
                right: 30px;
                top: 1px;
                height: 30px;
                width: 1px;
                background: #d3dae4;
              }

              .el-input:focus::after {
                background: #7aa5e3;
              }

              .el-select {
                // .el-input__suffix {
                // display: none;
                // }
                .el-select__tags {
                  max-width: 100% !important;

                  .el-select__input {
                    margin: 0;
                    padding: 0 7px;
                    max-width: 100% !important;
                  }
                }

                .el-input__suffix {
                  display: block;

                  .el-input__icon {
                    line-height: 32px;
                  }
                }

                .el-input::after {
                  content: none;
                }
              }

              .el-date-editor {
                position: relative;
                width: 200px;

                .el-input__prefix {
                  right: 1px !important;
                  top: 1px;
                  left: unset;
                  width: 29px;
                  height: 30px;

                  .el-input__icon {
                    width: 29px;
                    height: 30px;
                    line-height: 30px;
                    color: #f1ae3d;
                  }
                }

                .el-input__suffix {
                  right: 30px;

                  .el-icon-circle-close {
                    line-height: 30px;
                  }
                }
              }

              .el-textarea {
                .el-textarea__inner {
                  padding-left: 7px;
                  padding-right: 7px;
                }
              }

              .el-range-editor {
                padding: 0 30px 0 7px;
                position: relative;
                height: 32px;
                line-height: 32px;

                .el-range-input {
                  width: 45%;
                  text-align: center;
                }

                .el-range-separator {
                  margin-right: 3px;
                  padding: 0 3px;
                }

                .el-input__icon {
                  position: absolute;
                  right: 0;
                  width: 29px;
                  height: 30px;
                  line-height: 30px;
                  color: #f1ae3d;
                }
              }

              .el-range-editor::after {
                position: absolute;
                content: '';
                width: 1px;
                height: 30px;
                right: 30px;
                background: #d3dae4;
              }

              .el-button {
                margin-left: 7px;
                padding: 0;
                width: 136px;
                height: 32px;
                line-height: 32px;
                background: #f1ae3d;
                border-color: #f1ae3d;
                border-radius: 5px;
                font-family: PMingLiU-ExtB;
                font-size: 14px;
                color: #ffffff;
              }

              .disabledBtn {
                background-color: #bfbfbf;
                border-color: #bfbfbf;
              }
            }
          }
        }
      }
    }
  }
}
</style>